<template>
  <view class="container">
    <!-- 轮播图 -->
    <my-swiper></my-swiper>
    <!-- 菜单 -->
    <my-menu></my-menu>
    <!-- 排行榜 -->
    <book-ranking-list></book-ranking-list>
    <!-- 推荐内容区块 -->
    <my-recommend v-for="(item, index) in recommendList" :key="index" :title="item.title" :type="item.type" />
  </view>
</template>

<script>
  export default {
    data() {
      return {
        recommendList: [{
            title: '为你推荐',
            type: 'recommend' // 个性化推荐
          },
          {
            title: '重磅推荐',
            type: 'featured' // 精选推荐
          },
          {
            title: '电子诗集',
            type: 'poetry' // 诗歌分类
          },
          {
            title: '猜你喜欢',
            type: 'guess' // 推荐算法
          },
          {
            title: 'AI专区',
            type: 'ai' // AI相关
          },
          {
            title: '畅销图书',
            type: 'bestseller' // 畅销书
          },
          {
            title: '口碑力荐',
            type: 'highRating' // 高评分
          },
          {
            title: '最新上架',
            type: 'newRelease' // 新书
          },
          {
            title: '出版社精选',
            type: 'publisherChoice' // 出版社精选
          }
        ]

      }
    },
    methods: {

    }
  }
</script>

<style lang="scss">
  .menu {
    display: flex;
    background-color: #FFFFFF;
    height: 100rpx;
    justify-content: space-around;
    padding: 20rpx;
    border-radius: 10rpx;
    margin: 0 10px;

    .menu-item {
      display: flex;
      align-items: center;
      justify-content: center;
      flex-direction: column;

      .menu-icon {
        width: 60rpx;
        height: 60rpx;
        margin-bottom: 5rpx;
      }

      .menu-text {
        font-size: 14px;
        color: #2e2e2e;
      }
    }
  }
</style>
